page{height:100%;background-color:#F7F7F7;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.collections{
  width:calc(unit(350,rpx) * 750 / 390);
  margin-left:calc(unit(20,rpx) * 750 / 390);
  margin-right:calc(unit(20,rpx) * 750 / 390);
  //background-color: cornsilk;
  .btn_line{
    z-index: 50;
    width:calc(unit(350,rpx) * 750 / 390);
    position:fixed;
    height:calc(unit(45+16,rpx) * 750 / 390);
    padding-top: calc(unit(16,rpx) * 750 / 390);
    background-color: #F7F7F7;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    view{
      width: calc(unit(124,rpx) * 750 / 390);
      height:calc(unit(45,rpx) * 750 / 390);
      background-color:white;
      font-size: calc(unit(18,rpx) * 750 / 390);
      text-align: center;
      line-height:calc(unit(45,rpx) * 750 / 390);
      border-radius: calc(unit(8,rpx) * 750 / 390);
      border-top:calc(unit(1,rpx) * 750 / 390)solid black;
      border-left:calc(unit(1,rpx) * 750 / 390)solid black;
      border-right:calc(unit(4,rpx) * 750 / 390)solid black;
      border-bottom:calc(unit(4,rpx) * 750 / 390)solid black;
    }
  }
  .collectionCard{
    position:relative;
    top:calc(unit(88+45+16,rpx) * 750 / 390);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .card{
      //background-color: chartreuse;
      width: calc(unit(167,rpx) * 750 / 390);
      margin-top: calc(unit(16,rpx) * 750 / 390);
      .img_card{
        width: calc(unit(157,rpx) * 750 / 390);
        height: calc(unit(180,rpx) * 750 / 390);
        margin: 0 auto;
        position: relative;
        image{
          position: absolute;
          left: calc(unit(21,rpx) * 750 / 390);
          top: calc(unit(20,rpx) * 750 / 390);
          width: calc(unit(112.5,rpx) * 750 / 390);
          height: calc(unit(150,rpx) * 750 / 390);
        }
      }
      .message_card{
        margin-top:calc(unit(8,rpx) * 750 / 390);
        font-size:calc(unit(18,rpx) * 750 / 390);
        text-align: center;
        display: flex;
        flex-direction: column;
        progress{
          margin: 0 auto;
          width:  calc(unit(80,rpx) * 750 / 390);
          font-size:calc(unit(14,rpx) * 750 / 390);
          text{
            margin-left: calc(unit(-80,rpx) * 750 / 390);
            line-height:calc(unit(12,rpx) * 750 / 390);
            color: #979797;
          }
          .wx-progress-inner-bar {
            width:0;
            height: 100%;
          }
          .wx-progress-inner-bar {
            border-radius:calc(unit(100,rpx) * 750 / 390);
          }
        }
      }
    }
  }
  .collectionMedal{
    width:calc(unit(350,rpx) * 750 / 390);
    height: 74.3%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    //background-color: blanchedalmond;
    position: fixed;
    margin-top:calc(unit(88+45+32,rpx) * 750 / 390);
    //padding-top: calc(unit(-16, rpx) * 750 / 390);
    .medal {
      position: relative;
      width: calc(unit(167,rpx) * 750 / 390);
      //margin-top: calc(unit(-16,rpx) * 750 / 390);
      height:31.4%;
      margin-bottom:calc(unit(8, rpx) * 750 / 390);
      //background-color: chartreuse;
      .img_medal {
        width: 15.7vh;
        height: 15.7vh;
        border-radius: 50%;
        margin: 0 auto;
        image {
          width: 100%;
          height: 100%;
          mode: scaleToFill;
          overflow: hidden
        }
      }
      .message_medal{
        position: absolute;
        bottom:0;
        width: calc(unit(120,rpx) * 750 / 390);
        height: 27%;
        left: calc((100% - unit(120,rpx) * 750 / 390)/2);
        font-size:calc(unit(18,rpx) * 750 / 390);
        text-align: center;
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        .getCouple{
          border: 1px solid #115BDE;
          border-radius:calc(unit(100,rpx) * 750 / 390);
          color: #115BDE;
        }
        progress{
          margin: 0 auto;
          width:  calc(unit(80,rpx) * 750 / 390);
          font-size:calc(unit(14,rpx) * 750 / 390);
          text{
            margin-left: calc(unit(-80,rpx) * 750 / 390);
            line-height:calc(unit(12,rpx) * 750 / 390);
            color: black;
          }
          .wx-progress-inner-bar {
            width:0;
            height: 100%;
          }
          .wx-progress-inner-bar {
            border-radius:calc(unit(100,rpx) * 750 / 390);
          }
        }
      }
    }

  }
  .showCouple{
    width:calc(unit(300,rpx) * 750 / 390); ;
    height: 56.8%;
    position:absolute;
    z-index:100;
    top:26.9%;
    left: calc((100% - unit(300,rpx) * 750 / 390)/2);
    image{
      width: 100%;
      height: 100%;
    }
    .coupons{
      transition: all 1s ease;
      height:20%;
      width:calc(unit(260,rpx) * 750 / 390);
      background-color: white;
      top:50%;
      left: calc((100% - unit(260,rpx) * 750 / 390)/2);
      border-radius: calc(unit(16,rpx) * 750 / 390); ;
      position: absolute;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      z-index: 100;
      .ring{
        width:calc(unit(25,rpx) * 750 / 390);
        height:calc(unit(25,rpx) * 750 / 390);
        background-color: #115BDE;
        position: absolute;
        border-radius: 50%;
        top:calc((100% - unit(25,rpx) * 750 / 390)/2);
      }
      .l{
        left:calc(unit(-12.5,rpx) * 750 / 390);
      }
      .r{
        right:calc(unit(-12.5,rpx) * 750 / 390);
      }

      .left{
        font-size: calc(unit(28,rpx) * 750 / 390);
        position: absolute;
        left:calc(unit(16,rpx) * 750 / 390);
        height:  calc(unit(36,rpx) * 750 / 390);;
        top:calc((100% - unit(36,rpx) * 750 / 390) / 2 );
        color:#115BDE;
        font-weight: bolder;
      }
      .line{
        position: absolute;
        left:calc(unit(90,rpx) * 750 / 390);
        height:calc(unit(110,rpx) * 750 / 390);
        width:calc(unit(2,rpx) * 750 / 390);
        background-image: linear-gradient(#979797 50%, rgba(255,255,255,0) 0%);
        background-size: calc(unit(10,rpx) * 750 / 390) calc(unit(10,rpx) * 750 / 390);
        background-repeat: repeat-y;
        transform: translateY( calc(unit(-7,rpx) * 750 / 390));
      }
      .right{
        height: 66%;
        width:calc(unit(118,rpx) * 750 / 390);
        //background-color: #ffce81;
        position: absolute;
        left:calc(unit(110,rpx) * 750 / 390);
        top:17%;
        font-size: calc(unit(18,rpx) * 750 / 390);
        white-space: nowrap;
        .ddl{
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797
        }
        .bottomBlock{
          //background-color: red;
          height:28.99% ;
          width: 100%;
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797;
          position: absolute;
          bottom:0;
          display: flex;
          flex-direction: row;
          .rule{
            //transform: translateY(-25%);
            image{
              height:100%;
              width: calc(unit(20,rpx) * 750 / 390);
              transform: translateY(25%);
            }
          }
          .btn{
            transform: translateY(25%);
            height: 100%;
            font-size: calc(unit(14,rpx) * 750 / 390);
            line-height:calc(unit(20,rpx) * 750 / 390);
            width:calc(unit(55,rpx) * 750 / 390);
            text-align: center;
            position: absolute;
            color: white;
            right: calc(unit(-10,rpx) * 750 / 390);;
            bottom: 0;
            background-color: #115BDE;
            border-radius: calc(unit(50, rpx) * 750 / 390);
            border-top: calc(unit(1, rpx) * 750 / 390) solid black;
            border-left: calc(unit(1, rpx) * 750 / 390) solid black;
            border-right: calc(unit(2, rpx) * 750 / 390) solid black;
            border-bottom: calc(unit(2, rpx) * 750 / 390) solid black;
          }
        }
        .ruleMes{
          position: absolute;
          //background-color: lightcoral;
          top:calc(unit(98,rpx) * 750 / 390);
          font-size: calc(unit(12,rpx) * 750 / 390);
          color: #979797;
        }
      }
    }
    .closeView{
      height:34%;
      width:100%;
      position:absolute;
      top:0;
    }
    .getView{
      height:10%;
      position:absolute;
      width:calc(unit(228,rpx) * 750 / 390);
      left:calc((100% - unit(228,rpx) * 750 / 390)/2);
      bottom: 9%;
    }
  }
}
.mask{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.7;
}

